<template>
	<view class="content">
		<mark-slide-list :list="list" :button="buttonList" :border="true" @click="clickMethod" @change="changeMethod"></mark-slide-list>
		
	</view>
</template>

<script>
	import markSlideList from '../components/mark-slide-list/mark-slide-list.vue'
	
	const http = require('../../utils/http')
	export default {
		components: {
			markSlideList
		},
		name: 'slide-list',
		data() {
			return {
				list : [
					{
						id: 1,
						image: '../../static/slide-list/logo.png',
						title: '张三',
						rightDetail: '2019-03-18',
						detail: 'XXXXXXXXXXXXXXXXXXX公司',
						isShare: true,
						slide_x: 0
					},
					{
						id: 2,
						surname: '李',
						title: '李二',
						rightDetail: '2019-03-17',
						detail: 'XXXXXXXXXXXXXXXXXXX公司',
						isShare: false,
						slide_x: 0
					}
					
				],
				buttonList: [
					{
						title: '删除',
						background: '#ff3b32'
					}
				]
			};
		},
		
		methods: {
			changeMethod(data, button, index){
				console.log('滑动按钮回调', data)
				console.log('滑动按钮回调', button)
				let self = this
				console.log('点击删除')
				if(button.title === '删除'){
					uni.showModal({
						title: '',
						content: '确定要删除该信息吗？',
						confirmText: '删除',
						confirmColor: '#ff3b32',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定')
								self.list.splice(index, 1)
								uni.showToast({
									icon: "success",
									title: '操作成功!',
									duration: 2000
								});
							} else if (res.cancel) {
								console.log('用户点击取消')
							}
						}
					})
				}
			},
			clickMethod(data){
				console.log('点击行回调', data)
			}
		}
	};
</script>

<style lang="scss" scoped>
	page{
		background: #f2f2f2;
	}
</style>
